<script setup>
import { onMounted, ref } from "vue";
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import http from "@/utils/http";
import { userStore } from "@/stores/userStore.js";

const uStore = userStore()
const tableData = ref([])
const params = ref({
  page: 1,
  pageSize: 4,
  userId: uStore.userInfo.data.userId
})
const total = ref(0) // 总条数
const getGoodsInfo = async () => {
  const res = await http.get('/checks/personal', { params: params.value })
  tableData.value = res.data.rows
  total.value = res.data.total // 设置总条数

}

//下架商品
const handleDelete = async (row) => {
  const res = await http.get('/goods/delisting/' + row.goodsId)

  if (res.code === 666) {
    ElMessage({ type: 'success', message: '下架成功' })

    await getGoodsInfo()
  }

}


//对话框修改更新
const dialogFormVisible = ref(false)
const formLabelWidth = '100px'
const form = ref({
  goodsId: null,
  goodsName: '',
  goodsPrice: null,
  goodsDescription: '',
  goodsAddress: '',
  goodsPhoto: ''
})

// 修改商品 - 打开对话框并初始化表单
const handleEdit = (index, row) => {
  form.value = {
    goodsId: row.goodsId,
    goodsName: row.goodsName,
    goodsPrice: row.goodsPrice,
    goodsDescription: row.goodsDescription,
    goodsAddress: row.goodsAddress,
    goodsPhoto: row.goodsPhoto
  }
  dialogFormVisible.value = true
}

// 图片上传成功处理
const handleAvatarSuccess = (response) => {
  if (response.code === 666) {
    form.value.goodsPhoto = response.data
    ElMessage.success('图片上传成功')
  }
}

// 提交修改
const submitEdit = async () => {
    const res = await http.put('/goods/update', form.value)
    if (res.code === 666) {
      ElMessage.success('修改成功')
      dialogFormVisible.value = false
      await getGoodsInfo() // 刷新表格数据
    }

}

const handlePageChange = async (newPage) => {
  params.value.page = newPage
  await getGoodsInfo()
}


onMounted(() => {
  getGoodsInfo()
})

</script>

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="商品名称" prop="goodsName"></el-table-column>
    <el-table-column label="商品价格" prop="goodsPrice"></el-table-column>
    <el-table-column label="商品描述" prop="goodsDescription"></el-table-column>
    <el-table-column label="发货地址" prop="goodsAddress"></el-table-column>

    <!-- c的 -->
    <el-table-column label="图片">
      <template #default="scope">
        <el-image :src="scope.row.goodsPhoto" style="width: 120px; height: 120px"></el-image>
        <!-- <div style="text-align: center;width: 100px;">美景</div> -->
      </template>
    </el-table-column>

    <el-table-column label="发布时间" prop="createTime"></el-table-column>
    <el-table-column label="状态" prop="state">
      <template v-slot="scope">
        <el-tag type="info" v-if="scope.row.state === 0">{{ '未上架' }}</el-tag>
        <el-tag type="warning" v-if="scope.row.state === 1">{{ '待售' }}</el-tag>
        <el-tag type="success" v-if="scope.row.state === 2">{{ '已售' }}</el-tag>
        <el-tag type="danger" v-if="scope.row.state === 3">{{ '已下架' }}</el-tag>
      </template>
    </el-table-column>


    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          修改
        </el-button>

        <el-popconfirm title="你确定要下架商品？" @confirm="handleDelete(scope.row)" confirm-button-text="确定"
          cancel-button-text="取消">
          <template #reference>
            <el-button type="text">下架</el-button>
          </template>
        </el-popconfirm>

      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="修改商品" width="500">
    <el-form :model="form">
      <el-form-item label="商品名称" :label-width="formLabelWidth" prop="goodsName">
        <el-input v-model="form.goodsName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品价格" :label-width="formLabelWidth" prop="goodsPrice">
        <el-input v-model.number="form.goodsPrice" type="number" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品描述" :label-width="formLabelWidth" prop="goodsDescription">
        <el-input v-model="form.goodsDescription" autocomplete="off" />
      </el-form-item>
      <el-form-item label="发货地址" :label-width="formLabelWidth" prop="goodsAddress">
        <el-input v-model="form.goodsAddress" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品图片" prop="goodsPhoto">
        <el-upload 
          class="avatar-uploader" 
          name="photo" 
          action="http://localhost:8080/goods/upload" 
          :auto-upload="true"
          :show-file-list="false" 
          :on-success="handleAvatarSuccess"
        >
          <img v-if="form.goodsPhoto" :src="form.goodsPhoto" class="avatar" style="width: 150px; height: 150px" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 分页 -->
  <el-pagination
  v-model:current-page="params.page"
  v-model:page-size="params.pageSize"
  layout="prev, pager, next"
  :total="total"
  @current-change="handlePageChange"
/>

</template>

<style scoped>
.avatar-uploader .avatar {
  display: block;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}
</style>